
body {
	background-image: url("images/background.png");
	background-repeat: repeat;
	background-size: 20vh;
	margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  min-height: 100%;
  width: 100%;
}

.navigation {
 margin-top: 2vh;
 margin-left: auto;
 margin-right: auto;
 display: flex;
 justify-content: center;
 align-items: center;
}

.navigation-button {
	margin: 2vh;
  padding: 0.5vh;
  font-size: 2vw;
  font-family: Comic Sans MS, Comic Sans;
  outline: 0.5vh solid DimGray;
  background-color: LightGray;
  white-space: nowrap;
}

a:hover {
  background-color: yellow;
}

.audio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container {
  margin-top: 2vh;
  padding: 0.5vh;
  margin-left: auto;
  margin-right: auto;
  background-color: LightGray;
  border: 1vh solid DimGray;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: calc(40%);
  max-width: calc(100% - 100px);
}

.logo-container img {
  size: 1vh;
}

.announcement-container {
  font-family: Comic Sans MS, Comic Sans;
  text-align: center;
  min-width: calc(40%);
  max-width: calc(100% - 400px);
}

.announcement-container p {
	margin: 0 auto;
  padding: 0.5vh;
  text-align: center;
  white-space: nowrap;
  font-size: 4vw;
}

#announcement1 {
  margin-top: 2vh;
  animation-name: announcement-flash-1;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  color: white;
  background-color: LightGray;
  border: 1vh solid DimGray;
}

#announcement2 {
  margin-top: 2vh;
  animation-name: announcement-flash-2;
  animation-duration: 2s;
  animation-iteration-count:infinite;
  color: white;
  background-color: LightGray;
  border: 1vh solid DimGray;
}

@keyframes announcement-flash-1 {
  0%   {color: white;}
  25%  {color: blue;}
  50%  {color: white;}
  75%  {color: blue;}
  100% {color: white;}
}

@keyframes announcement-flash-2 {
  0%   {color: yellow;}
  25%  {color: white;}
  50%  {color: yellow;}
  75%  {color: white;}
  100% {color: yellow;}
}

#greeting {
	background-color: #a5a18d;
}

#the-company {

}

#contact-us {
	background-color: LightGray;
}

#contact-us-text {
	font-size: 8vh;
	margin-bottom: 20vh;
	font-family: Comic Sans MS, Comic Sans;
	color: red;
	text-align: center;
}

.contact-information {
	margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  border: 1vh solid DimGray;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 60%;
}

.contact-information p {
	font-size: 20px;
	margin: 1vh;
	font-family: Comic Sans MS, Comic Sans;
	color: white;
}

.company-display {
  margin: 2vh;
  min-height: calc(100vh - 400px);
  min-width: calc(60%);
  max-width: calc(100% - 600px);
  display: block;
  height: auto;
  max-height: 100%;
  position: relative;
}

.company-display p {
	font-size: 24px;
	margin: 1vh;
	font-family: Comic Sans MS, Comic Sans;
}

.company-description img {
  max-height: 60vh;
}

.company-text {
  position: relative;
  margin: 10px;
  margin: auto;
  background-color: LightGray;
  border: 1vh solid DimGray;
  text-align: center;
}

.kiosk-image {
  margin: auto;
  position: relative;
  width: 560px;
  max-width: 100%;
  height: 560px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(images/kiosk.png);
  overflow: hidden;
}

.movie-text {
  position: relative;
  margin: 10px;
  margin: auto;
  background-color: LightGray;
  border: 1vh solid DimGray;
  text-align: center;
}


.movie-display {
 margin: 2vh;
 min-width: 60%;
 min-height: calc(100vh - 400px);
 min-width: calc(60%);
 max-width: calc(100% - 600px);
 display: block;
 height: auto;
 position: relative;
}

.movie-image {
  margin: auto;
  margin-top: 3vh;
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 480px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(images/that-plant-over-there.png);
}

.movie-display #caption {
	font-size: 48px;
	font-family: Comic Sans MS, Comic Sans;
  color: red;
  text-align: center;
}

.movie-display #title {
  font-size: 24px;
  font-family: Comic Sans MS, Comic Sans;
}

.movie-display #description {
	font-size: 18px;
	font-family: Comic Sans MS, Comic Sans;
}

#new-arrival {
	background-color: black;
}

.page {
  display: block;
  vertical-align: top;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
}

section {
	height: 100vh;
	display: flex;
  align-items: center;
  flex-direction: column;
  overflow: auto;
  justify-content: center;
}

.page, section {
  position: relative;
  width: 100%;
}

.main-content {
}

#logo {
	height: 100%;
	width: 100%;
	object-fit: contain
}

.greeting-content {
  display: flex;
  align-items: center;
  flex-direction: column;
}